<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>常见元素</title>
    </head>
    <style>
        img:hover{
            background-color: greenyellow;
        }
    </style>
    <body>
        <span id="myhead">超级连接回到的头部</span>
        <h1>常见元素</h1>
        <strong>大量在使用软件时，大量时间使用或者看到的元素</strong>

        <h2>form表单元素</h2>
        <strong> 
            form表单元素  内部常期连用元素
            HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器
        </strong>    
        <!-- 
            form代表一个区域 
              交互组件
              组件的填写的信息，使用者提供的信息，能过method方式走http请求发送给后台web服务 [tomcat | jetty]
            属性：
              action = 表单提交的地址
                普通页面  如aa.html
                网站     https://www.baidu.com
                后台地址  /login/api
                也可以是一个通用的  restful api
                        http://localhost:8082/product/category/list
              method = 请求方式 [get | post ... put delet ajax来完成]  
                     get : 以地址栏?  & 方式来完成传递  ?属性名称=值&属性名称=值&属性名称=值。。。。
                            传递的参数有长度限制 只提供 application/x-www-form-urlencoding 查询功能
                            支持缓存.enctype="application/x-www-form-urlencoded"
                     post application/x-www-form-urlencoding mutipart/form-data [文件上传]
                         要明确指明 post传递试  enctype="multipart/form-data"
            form不会自动提交，要求也用户交互 ，
            用户手工提交 :  交互组件
                <input type='submit' /> 提交按钮 ,使用者点击按钮的时候 ，会把表单提交到指定的action
            使用js提交 
                js抓取form对象.submit();

            交互组件提交形式
            key=value
            key : 是form表单当中交互组件的name属性的值 ,key可以重复，如果出现重复那么后台请以数组的方式来接收
            value : 交互组件的value属性 ,如果写上value 表示当前元素默认值，value的值，随着用户改变而改变

            input : 组件 , 输入组件,要求用户交互，将交互以后的value做为值.

            type : 类型 [text | submit | password | radio | checkbox ]
            placeholder : 文字提示信息


            select :  下拉列表
               option    : 选项  <option value='值'>内容 </option>
               optgroup  : 对所有的option进行分组   <optgroup label="近2年">
            form - get  带参提交 ? Query String parameter 
                Request.setParameter("username","sss") -> rquest.getParameter("usernmae")
                public String abc(@RequestParmeter("username") String username)

                没有给我们 Query String parameter  声明 ，RequestPayload {} 声明是一组对象 ajax
                  @RequestBody  -- 只支持post请求 只能有一个
                  public String abc(@RequestBody User user)

                FORM DATA 表示通过表单提交的，这时候 可以使用上面两种方式


         -->
        <form action="https://www.baidu.com" method="get" >
            <div>
                <span>
                    <label for="username">单行文本输入框</label>
                </span>
                <span style="margin-left: 15px;">
                    <input type="text" name="username" placeholder="请输入用户名" />
                </span>
            </div>
           
            <div>
                <span>
                    <label for="userpass">密码框 ， 密文</label>
                </span>
                <span style="margin-left: 15px;">
                    <input type="password" name="userpass" placeholder="请输入密文" />
                </span>
            </div>

            <div>
                <span>
                    <label for="userpass">性别,一组只有选择一个</label>
                </span>
                <span style="margin-left: 15px;">
                    <label>男</label><input type="radio" name="sex" value="男" />
                    <label>女</label><input type="radio" name="sex" value="女" />
                </span>
            </div>

            <div>
                <span>
                    <label for="userpass">爱好,一组可以选择多个</label>
                </span>
                <span style="margin-left: 15px;">
                    <label>篮球</label><input type="checkbox" name="hobby" value="篮球" />
                    <label>足球</label><input type="checkbox" name="hobby" value="足球" />
                    <label>排球</label><input type="checkbox" name="hobby" value="排球" />
                </span>
            </div>

            <div>
                <span>
                    <label for="userpass">出生日期</label>
                </span>
                <span style="margin-left: 15px;">
                    <label for="year">年</label>
                   <select name="year" >
                        <optgroup label="近2年">
                            <option value="2022">2022</option>
                            <option value="2021">2021</option>
                        </optgroup>
                        <optgroup label="近5年">
                            <option value="2022">2020</option>
                            <option value="2021">2019</option>
                            <option value="2021">2018</option>
                        </optgroup>
                   </select>
                   <label for="mothd">月</label>
                   <select name="mothd" >
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="05">06</option>
                        <option value="05">07</option>
                        <option value="05">08</option>
                        <option value="05">09</option>
                        <option value="05">10</option>
                        <option value="05">11</option>
                        <option value="05">12</option>
                   </select>
                   <label for="day">日</label>
                   <select name="day" >
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="05">06</option>
                        <option value="05">07</option>
                        <option value="05">08</option>
                        <option value="05">09</option>
                        <option value="05">10</option>
                        <option value="05">11</option>
                        <option value="05">12</option>
                   </select>
                </span>
            </div>

            <div>
                <span>
                    <label for="userpass">日历选择器</label>
                </span>
                <span style="margin-left: 15px;">
                    <input type="date" name="newbirday" />
                </span>
            </div>

            <div>
                <span>
                    <label for="userpass">文本域</label>
                </span>
                <span style="margin-left: 15px;">
                    <textarea name="text" rows="10" cols="30">

                    </textarea>
                </span>
            </div>

            
            <input type="submit" />
        </form>



        <h2>其它常见元素</h2>
        <h3>列表</h3>
        <strong>三种   无序  有序  自定义</strong>
        <!-- 
            list-style-type : 显示列表的图标 ·「node square 方法 cicrle」
            list-style-images : 找个小图标...css
         -->
        <ul style="list-style-type: \1F44D;">
            <li>第一类目</li>
            <li>第二类目</li>
        </ul> 

        <ol>
            <li>第一类目</li>
            <li>第二类目</li>
        </ol>
        <dl>
            <dd>第一类目</dd>
            <dd>第二类目</dd>
        </dl>

        <h3>图像</h3>
        <!-- 
            img : 图片占位符,不是块元素
            src : 图片占位符的源地址，指的就是图片的地址
            alt : 图片替换文字 ,图片不能正常显示的时候 ，显示的文字 
            title : 吸附字,就是在鼠标停放在元素 上面的时候，显示的文字 
            width : 宽度
            height :高度
            border : 边框
            //样式问题：
            相把这个图片改成 头像框 
            border-radius : css3样式 圆角样式 四个部分组成  上 右 下 左 | 可以为数字 可以为100%
         -->
        <img style="padding:5px;border:1px solid grey;border-radius: 5px 30px; " width="100px" height="100px" src="../images/p.jpeg" title="你点我想什么" alt="你看我有图片没,没有图片你就看到我了"/>
        <img style="padding:5px;border:1px solid grey;border-radius: 5px 30px; " width="100px" height="100px" src="../images/p.jpeg" title="你点我想什么" alt="你看我有图片没,没有图片你就看到我了"/>

        <img border="1" alt="你看我有图片没,没有图片你就看到我了"/>

        <div style="width:1000px;height:100px;background-image: url(../images/bg.webp);">
            <img border="1" alt="你看我有图片没,没有图片你就看到我了"/>
        </div>

        <h3>A 标签</h3>
        <strong>1: 锚点，在同一页面当中跳转 。 2 ：网站与网站  页面与页同间跳转</strong>

        <!-- 
            跳转页面的时候 ，我们要使用相同路径就可以  ./ 当前目录  ../上一级目录 
            跳转网站的时候 ，完整请求地址
            target : 打开方式 _self 当前页面直接打开
            _black  在新的签页当中打开
         -->

        <a href="https://www.baidu.com" target="_self">百度一下</a>

        <h4>锚点</h4>
        <div  style="height:800px;border : 1px solid red;"></div>


        <a href="#myhead">返回头部</a>

        <a href="https://www.baidu.com">
            <img src="../images/p.jpeg" alt="">
        </a>

    </body>
</html>
